/**
 * === z-index ===
 *
 * pogoSlider-progressBar =    6
 * pogoSlider-dir-btn     =   10
 * pogoSlider-nav         =   10
 * pogoSlider-loading     =   11
 * 
 */

.pogoSlider {
	width: 100%;
	height: 0;
	padding-bottom: 48%;
	position: relative;
	overflow: hidden;
}

#column-left .pogoSlider,
#column-right .pogoSlider,
#content .pogoSlider {
	margin-bottom: 20px;
}

.pogoSlider--banner .pogoSlider-slide {
	ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.pogoSlider-slide {
	width: 100%;
	height: 100%;
	position: absolute;
	background-size: cover;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	perspective: 1300px;
	overflow: hidden;
}

.pogoSlider-loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #eaeaea;
	z-index: 11;
}

.pogoSlider-loading-icon {
	position: absolute;
	top: 50%;
	margin-top: -18px;
	left: 50%;
	margin-left: -18px;
	width: 36px;
	height: 36px;
	background-image: url();
}

.pogoSlider-slide-element {
	animation-fill-mode: both;
}

.m-pogoSlider .pogoSlider-slide-element {
	position: absolute;
	margin: 0;
	box-sizing: border-box;
}

.pogoSlider-progressBar {
	position: absolute;
	width: 100%;
	height: 5px;
	top: 0;
	left: 0%;
	background: #fff; /* fallback */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
	filter: alpha(opacity=20);
	background: rgba(255,255,255,0.2);
	z-index: 6;
}

.pogoSlider-progressBar-duration {
	position: absolute;
	height: 100%;
	left: 0;
	width: 0%;
	background: #fff; /* fallback */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	filter: alpha(opacity=40);
	background: rgba(255,255,255,0.4);
}

.pogoSlider-dir-btn {
	position: absolute;
	z-index: 3;
	width: 15px;
	height: 15px;
    background: none;
	border-color: #f15f2a;
/*	border-color: rgba(255,94,41,1);*/
	border-style: solid;
	transform: rotate(45deg);
	cursor: pointer;
}

.pogoSlider-dir-btn:hover {
	border-color: #f15f2a;
}

.pogoSlider-dir-btn:focus {
	outline: none;
}

.pogoSlider--dirTopLeft .pogoSlider-dir-btn--prev,
.pogoSlider--dirTopRight .pogoSlider-dir-btn--prev,
.pogoSlider--dirBottomLeft .pogoSlider-dir-btn--prev,
.pogoSlider--dirBottomRight .pogoSlider-dir-btn--prev,
.pogoSlider--dirCenterHorizontal .pogoSlider-dir-btn--prev {
	border-width: 0 0 3px 3px;
}

.pogoSlider--dirTopLeft .pogoSlider-dir-btn--next,
.pogoSlider--dirTopRight .pogoSlider-dir-btn--next,
.pogoSlider--dirBottomLeft .pogoSlider-dir-btn--next,
.pogoSlider--dirBottomRight .pogoSlider-dir-btn--next,
.pogoSlider--dirCenterHorizontal .pogoSlider-dir-btn--next {
	border-width: 3px 3px 0 0;
	
}

.pogoSlider--dirCenterVertical .pogoSlider-dir-btn--next {
	border-width: 3px 0 0 3px;
}

.pogoSlider--dirCenterVertical .pogoSlider-dir-btn--prev {
	border-width: 0 3px 3px 0;
}

.pogoSlider--dirTopLeft .pogoSlider-dir-btn,
.pogoSlider--dirTopRight .pogoSlider-dir-btn,
.pogoSlider--dirCenterVertical .pogoSlider-dir-btn--next {
	top: 14px;
}

.pogoSlider--dirTopLeft .pogoSlider-dir-btn--prev,
.pogoSlider--dirBottomLeft .pogoSlider-dir-btn--prev,
.pogoSlider--dirCenterHorizontal .pogoSlider-dir-btn--prev   {
	left: 40px;
}

.pogoSlider--dirTopLeft .pogoSlider-dir-btn--next,
.pogoSlider--dirBottomLeft .pogoSlider-dir-btn--next {
	left: 50px;
}

.pogoSlider--dirTopRight .pogoSlider-dir-btn--prev,
.pogoSlider--dirBottomRight .pogoSlider-dir-btn--prev {
	right: 50px;
}

.pogoSlider--dirTopRight .pogoSlider-dir-btn--next,
.pogoSlider--dirBottomRight .pogoSlider-dir-btn--next,
.pogoSlider--dirCenterHorizontal .pogoSlider-dir-btn--next {
	right: 40px;
}

.pogoSlider--dirBottomLeft .pogoSlider-dir-btn,
.pogoSlider--dirBottomRight .pogoSlider-dir-btn,
.pogoSlider--dirCenterVertical .pogoSlider-dir-btn--prev {
	bottom: 14px;
}

.pogoSlider--dirCenterVertical .pogoSlider-dir-btn {
	left: 50%;
	margin-left: -10px
}

.pogoSlider--dirCenterHorizontal .pogoSlider-dir-btn {
	top: 50%;
	margin-top: -10px;
}

.pogoSlider-nav {
	position: absolute;
	padding: 0;
	margin: 0;
	z-index: 10;
}

.pogoSlider--navTop .pogoSlider-nav,
.pogoSlider--navBottom .pogoSlider-nav {
	left: 50%;
	transform: translateX(-50%);
}

.pogoSlider--navTop .pogoSlider-nav {
	top: 10px;
}

.pogoSlider--navBottom .pogoSlider-nav {
	bottom: 25px;
}

.pogoSlider--navTop .pogoSlider-nav li,
.pogoSlider--navBottom .pogoSlider-nav li {
	display: inline;
	margin: 0 6px;
}

.pogoSlider--navLeft .pogoSlider-nav,
.pogoSlider--navRight .pogoSlider-nav {
	top: 50%;
	transform: translateY(-50%);
}

.pogoSlider--navLeft .pogoSlider-nav {
	left: 10px;
}

.pogoSlider--navRight .pogoSlider-nav {
	right: 10px;
}

.pogoSlider--navLeft .pogoSlider-nav li,
.pogoSlider--navRight .pogoSlider-nav li {
	display: block;
	margin: 6px 0;
}

.pogoSlider-nav-btn {
	background: #cccccc;
	background: rgba(241,95,41,0.7);
	border: none;
	border-radius: 50%;
    border: 1px solid #f15f2a;
	width: 16px;
	height: 16px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	cursor: pointer;
}

.pogoSlider-nav-btn:focus {
	outline: none;
}

.pogoSlider-nav-btn--selected {
	background: #fff;
	box-shadow: 0 1px 1px rgba(0,0,0,0.5);
}

.pogoSlider-slide-slice {
	overflow: hidden;
	position: absolute;
	background-size: cover;
}

.pogoSlider-slide-slice-inner {
	position: absolute;
	overflow: hidden;
}

/**
 * Element Animations
 */

/* Slide Down */

.pogoSlider-animation-slideDownIn {
	animation-name: slideDownIn;
}

@keyframes slideDownIn {
	0% {
		transform: translateY(-50px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.pogoSlider-animation-slideDownOut {
	animation-name: slideDownOut;
}

@keyframes slideDownOut {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	100% {
		transform: translateY(50px);
		opacity: 0;
	}
}

/* Slide Up */

.pogoSlider-animation-slideUpIn {
	animation-name: slideUpIn;
}

@keyframes slideUpIn {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.pogoSlider-animation-slideUpOut {
	animation-name: slideUpOut;
}

@keyframes slideUpOut {
	0% {
		transform: translateY(0);
		opacity: 1;
	}

	100% {
		transform: translateY(50px);
		opacity: 0;
	}
}

/* Slide Right */

.pogoSlider-animation-slideRightIn {
	animation-name: slideRightIn;
}

.pogoSlider-animation-slideRightOut {
	animation-name: slideRightOut;
}

@keyframes slideRightIn {
	0% {
		transform: translateX(-50px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideRightOut {
	0% {
		transform: translateX(0);
		opacity: 1;	
	}

	100% {
		transform: translateX(50px);
		opacity: 0;
	}
}

/* Slide Left */

.pogoSlider-animation-slideLeftIn {
	animation-name: slideLeftIn;
}

.pogoSlider-animation-slideLeftOut {
	animation-name: slideLeftOut;
}

@keyframes slideLeftIn {
	0% {
		transform: translateX(50px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideLeftOut {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	100% {
		transform: translateX(-50px);
		opacity: 0;
	}
}

/* Expand */

.pogoSlider-animation-expandIn {
	animation-name: expandIn;
}

.pogoSlider-animation-expandOut {
	animation-name: expandOut;
}

@keyframes expandIn {
	0% {
		transform: scale(0.7);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes expandOut {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

/* Contract */

.pogoSlider-animation-contractIn {
	animation-name: contractIn;
}

.pogoSlider-animation-contractOut {
	animation-name: contractOut;
}

@keyframes contractIn {
	0% {
		transform: scale(2);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes contractOut {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(0.5);
		opacity: 0;
	}
}

/* Spin In */

.pogoSlider-animation-spinIn {
	animation-name: spinIn;
}

.pogoSlider-animation-spinOut {
	animation-name: spinOut;
}

@keyframes spinIn {
	0% {
		backface-visibility: hidden;
		transform: scale(0) rotate(720deg);
	}

	100% {
		backface-visibility: hidden;
		transform: scale(1) rotate(0);
	}
}

@keyframes spinOut {
	0% {
		backface-visibility: hidden;
		transform: scale(1) rotate(0);
	}

	100% {
		backface-visibility: hidden;
		transform: scale(0) rotate(720deg);
	}
}
	
/* Side Fall */

.pogoSlider-animation-sideFallIn {
	transform-style: preserve-3d;
	animation-name: sideFallIn;
}

.pogoSlider-animation-sideFallOut {
	transform-style: preserve-3d;
	animation-name: sideFallOut;
}

@keyframes sideFallIn {
	0% {
		transform: translate(30%) translateZ(600px) rotate(10deg); 
		opacity: 0;
	}

	100% {
		transform: translate(0) translateZ(0) rotate(0); 
		opacity: 1;
	}
}

@keyframes sideFallOut {
	0% {
		transform: translate(0) translateZ(0) rotate(0); 
		opacity: 1;
	}

	100% {
		transform: translate(30%) translateZ(600px) rotate(10deg); 
		opacity: 0;
	}
}

/* 3D Horizontal Flip */

.pogoSlider-animation-horizontal3DFlipIn {
	transform-style: preserve-3d;
	animation-name: horizontal3DFlipIn;
}

.pogoSlider-animation-horizontal3DFlipOut {
	transform-style: preserve-3d;
	animation-name: horizontal3DFlipOut;
}

@keyframes horizontal3DFlipIn {
	0% {
		transform: rotateY(-70deg);
		opacity: 0;
	}

	100% {
		transform: rotateY(0deg);
		opacity: 1;
	}
}

@keyframes horizontal3DFlipOut {
	0% {
		transform: rotateY(0deg);
		opacity: 1;
	}

	100% {
		transform: rotateY(-70deg);
		opacity: 0;
	}
}

/* 3D Vertical Flip */

.pogoSlider-animation-vertical3DFlipIn {
	transform-style: preserve-3d;
	animation-name: vertical3DFlipIn;
}

.pogoSlider-animation-vertical3DFlipOut {
	transform-style: preserve-3d;
	animation-name: vertical3DFlipOut;
}

@keyframes vertical3DFlipIn {
	0% {
		transform: rotateX(-70deg);
		opacity: 0;
	}

	100% {
		transform: rotateX(0);
		opacity: 1;
	}
}

@keyframes vertical3DFlipOut {
	0% {
		transform: rotateX(0);
		opacity: 1;
	}

	100% {
		transform: rotateX(-70deg);
		opacity: 0;
	}
}

/* 3d Pivot */

.pogoSlider-animation-3DPivotIn {
	transform-style: preserve-3d;
	animation-name: pivotIn;
}

.pogoSlider-animation-3DPivotOut {
	transform-style: preserve-3d;
	animation-name: pivotOut;
}

@keyframes pivotIn {
	0% {
		transform: rotateX(-60deg);
		transform-origin: 50% 0;
		opacity: 0;
	}

	100% {
		transform: rotateX(0);
		transform-origin: 0 0;
		opacity: 1;
	}
}

@keyframes pivotOut {
	0% {
		transform: rotateX(0);
		transform-origin: 0 0;
		opacity: 1;
	}

	100% {
		transform: rotateX(-60deg);
		transform-origin: 50% 0;
		opacity: 0;
	}
}

/* Roll Left */

.pogoSlider-animation-rollLeftIn {
	animation-name: rollLeftIn;
}

.pogoSlider-animation-rollLeftOut {
	animation-name: rollLeftOut;
}

@keyframes rollLeftIn {
	0% {
		opacity: 0;
		transform: translateX(100%) rotate(120deg);
	}

	100% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}
}

@keyframes rollLeftOut {
	0% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}

	100% {
		opacity: 0;
		transform: translateX(-100%) rotate(-120deg);
	}
}


/* Roll Right */

.pogoSlider-animation-rollRightIn {
	animation-name: rollRightIn;
}

.pogoSlider-animation-rollRightOut {
	animation-name: rollRightOut;
}

@keyframes rollRightIn {
	0% {
		opacity: 0;
		transform: translateX(-100%) rotate(-120deg);
	}

	100% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}
}

@keyframes rollRightOut {
	0% {
		opacity: 1;
		transform: translateX(0px) rotate(0deg);
	}

	100% {
		opacity: 0;
		transform: translateX(100%) rotate(120deg);
	}
}

/* Glide Left */

.pogoSlider-animation-glideLeftIn {
	animation-name: glideLeftIn;
	animation-timing-function: ease-out;
}

.pogoSlider-animation-glideLeftOut {
	animation-name: glideLeftOut;
	animation-timing-function: ease-in;
}

@keyframes glideLeftIn {
	0% {
		transform: translateX(100%) skewX(-30deg);
		opacity: 0;
	}

	60% {
		transform: translateX(-20%) skewX(30deg);
		opacity: 1;
	}

	80% {
		transform: translateX(0%) skewX(-15deg);
		opacity: 1;
	}

	100% {
		transform: translateX(0%) skewX(0deg);
		opacity: 1;
	}
}

@keyframes glideLeftOut {
	0% {
		transform: translateX(0%) skewX(0deg);
		opacity: 1;
	}

	100% {
		transform: translateX(-100%) skewX(30deg);
		opacity: 0;
	}
}


/* Glide Right */

.pogoSlider-animation-glideRightIn {
	animation-name: glideRightIn;
	animation-timing-function: ease-out;
}

.pogoSlider-animation-glideRightOut {
	animation-name: glideRightOut;
	animation-timing-function: ease-in;
}

@keyframes glideRightIn {
	0% {
		transform: translateX(-100%) skewX(30deg);
		opacity: 0;
	}

	60% {
		transform: translateX(20%) skewX(-30deg);
		opacity: 1;
	}

	80% {
		transform: translateX(0%) skewX(15deg);
		opacity: 1;
	}

	100% {
		transform: translateX(0%) skewX(0deg);
		opacity: 1;
	}
}

@keyframes glideRightOut {
	0% {
		transform: translateX(0%) skewX(0deg);
		opacity: 1;
	}

	100% {
		transform: translateX(100%) skewX(-30deg);
		opacity: 0;
	}
}

/* FlipX */

.pogoSlider-animation-flipXIn {
	backface-visibility: visible !important;
	animation-name: flipXIn;
}

.pogoSlider-animation-flipXOut {
	animation-name: flipXOut;
	backface-visibility: visible !important;
}

@keyframes flipXIn {
	0% {
		transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}

	40% {
		transform: perspective(400px) rotateX(-10deg);
	}

	70% {
		transform: perspective(400px) rotateX(10deg);
	}

	100% {
		transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}
}

@keyframes flipXOut {
	0% {
		transform: perspective(400px) rotateX(0deg);
		opacity: 1;
	}

	100% {
		transform: perspective(400px) rotateX(90deg);
		opacity: 0;
	}
}

/* FlipY */

.pogoSlider-animation-flipYIn {
	backface-visibility: visible !important;
	animation-name: flipYIn;
}

.pogoSlider-animation-flipYOut {
	backface-visibility: visible !important;
	animation-name: flipYOut;
}

@keyframes flipYIn {
	0% {
		transform: perspective(400px) rotateY(90deg);
		opacity: 0;
	}

	40% {
		transform: perspective(400px) rotateY(-10deg);
	}

	70% {
		transform: perspective(400px) rotateY(10deg);
	}

	100% {
		transform: perspective(400px) rotateY(0deg);
		opacity: 1;
	}
}

@keyframes flipYOut {
	0% {
		transform: perspective(400px) rotateY(0deg);
		opacity: 1;
	}

	100% {
		transform: perspective(400px) rotateY(90deg);
		opacity: 0;
	}
}

/**
 * Slide Animations
 */

/* Fold Left */

.pogoSlider-animation-foldInLeft {
	animation-name: foldInLeft;
	animation-fill-mode: forwards;
	backface-visibility: hidden;
	transform-origin: 0% 0% 0;
	transform-style: preserve-3d;
}

@keyframes foldInLeft {
	0% {
		transform: rotateY(0deg);
	}

	100% {
		transform: rotateY(-180deg);
	}
}

.pogoSlider-animation-foldOutLeft {
	animation-name: foldOutLeft;
	animation-fill-mode: forwards;
	backface-visibility: hidden;
	transform-origin: 100% 100% 0;
	transform-style: preserve-3d;
}

@keyframes foldOutLeft {
	0% {
		transform: rotateY(180deg);
	}

	100% {
		transform: rotateY(0deg);
	}
}

/* Fold Right */

.pogoSlider-animation-foldInRight {
	animation-name: foldInRight;
	animation-fill-mode: forwards;
	backface-visibility: hidden;
	transform-origin: 100% 100% 0;
	transform-style: preserve-3d;
}

@keyframes foldInRight {
	0% {
		transform: rotateY(0deg);
	}

	100% {
		transform: rotateY(180deg);
	}
}

.pogoSlider-animation-foldOutRight {
	animation-name: foldOutRight;
	animation-fill-mode: forwards;
	backface-visibility: hidden;
	transform-origin: 0% 0% 0;
	transform-style: preserve-3d;
}

@keyframes foldOutRight {
	0% {
		transform: rotateY(-180deg);
	}

	100% {
		transform: rotateY(0deg);
	}
}

/* Expand Reveal */

.pogoSlider-animation-expandReveal {
	animation-name: expandReveal;
	animation-fill-mode: forwards;
}

@keyframes expandReveal {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(1.3);
		opacity: 0;
	}
}

/* Shrink Reveal */

.pogoSlider-animation-shrinkReveal {
	animation-name: shrinkReveal;
	animation-fill-mode: forwards;
}

@keyframes shrinkReveal {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(0.5);
		opacity: 0;
	}
}

/* Blocks Reveal */

.pogoSlider-animation-blocksReveal {
	animation-name: blocksReveal;
	animation-fill-mode: forwards;
}

@keyframes blocksReveal {
	0% {
		transform: scale(1);
		opacity: 1;
	}

	100% {
		transform: scale(0.8);
		opacity: 0;
	}
}

/* Down */

.pogoSlider-animation-downIn {
	animation-name: downIn;
	animation-fill-mode: forwards;
}

@keyframes downIn {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

.pogoSlider-animation-downOut {
	animation-name: downOut;
	animation-fill-mode: forwards;
}

@keyframes downOut {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(100%);
	}
}

/* Up */

.pogoSlider-animation-upIn {
	animation-name: upIn;
	animation-fill-mode: forwards;
}

@keyframes upIn {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0);
	}
}

.pogoSlider-animation-upOut {
	animation-name: upOut;
	animation-fill-mode: forwards;
}

@keyframes upOut {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-100%);
	}
}

/* Right */

.pogoSlider-animation-rightIn {
	animation-name: rightIn;
	animation-fill-mode: forwards;
}

@keyframes rightIn {
	0% {
		transform: translateX(-100%);
	}

	100% {
		transform: translateX(0);
	}
}

.pogoSlider-animation-rightOut {
	animation-name: rightOut;
	animation-fill-mode: forwards;
}

@keyframes rightOut {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(100%);
	}
}

/* Left */

.pogoSlider-animation-leftIn {
	animation-name: leftIn;
	animation-fill-mode: forwards;
}

@keyframes leftIn {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0);
	}
}

.pogoSlider-animation-leftOut {
	animation-name: leftOut;
	animation-fill-mode: forwards;
}

@keyframes leftOut {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}